import React from 'react'
import loginImg from '../../assets/login.png'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import api from '../../aips/login'
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const navgiate = useNavigate()
    const onFinish = (values) => {
        api.login({ ...values }).then(res => {
            console.log(res);
            if (res.message == '认证成功') {
                message.success(res.message)
                localStorage.token = res.data.token;
                localStorage.exipreTime = res.data.exipreTime;
                localStorage.roles = JSON.stringify(res.data.roles)
                localStorage.permissions = JSON.stringify(res.data.permissions)
                localStorage.user = JSON.stringify(res.data.user)
                navgiate('/home')
            }
        })
    };
    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundColor: '#f0f2f5' }}>
            <div style={{ width: '400px', height: '400px', backgroundColor: '' }}>
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '150px' }}>
                    <img src={loginImg} alt="" style={{ margin: '20px' }} />
                    <h2>赤兔养车</h2>
                </div>
                <div style={{ height: '50px' }}>
                    <ul style={{ display: 'flex', justifyContent: "space-around", alignItems: 'center', margin: '0', padding: '0', listStyle: 'none' }}>
                        <li>账户密码登录</li>
                        <li>手机号登录</li>
                    </ul>
                </div>
                <div>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                style={{ width: '400px' }}>
                                登录
                            </Button>

                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}

export default Login